<template>
    <div id="addPet">
            <van-cell-group>
                <van-field
                    v-model="petName"
                    clearable=true
                    label="宠物昵称:"
                    icon="question-o"
                    placeholder="请输入宠物昵称"
                    bind:click-icon="onClickIcon"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                 <van-field
                    v-model="petAge"
                    required
                    type="digit"
                    clearable=true
                    label="宠物年龄:"
                    icon="question-o"
                    placeholder="请输入宠物年龄"
                    bind:click-icon="onClickIcon"
                />

                 <van-field
                    v-model="petBirthday"
                    required
                    clearable
                    disabled
                    label="宠物出生日期:"
                    icon="question-o"
                    placeholder="请选择出生日期"
                    bind:click-icon="onClickIcon"
                    @click="checkPetBirthday"
                />
                  <van-field
                    v-model="petRedate"
                    required
                    clearable
                    disabled
                    label="宠物领养日期:"
                    icon="question-o"
                    placeholder="请选择领养日期"
                    bind:click-icon="onClickIcon"
                    @click="checkPetReDate"
                />

                <div class="img">
                    <label class="imgLabel">上传宠物头像</label>
                    <span class="imgSpan">
                        <!-- <van-uploader :file-list="fileList" bind:after-read="afterRead" /> -->
                          <van-uploader
                            :file-list="fileList"
                            max-count="1"
                            :after-read="afterRead"
                            @delete="deleteImg"
                            max-size="1048576"
                            @oversize="overSize"
                        />
                    </span>
                </div>

                <div class="button">
                    <van-button round type="info" @click="goBack" color="#515331">返回</van-button>
                    <van-button round type="info" @click="reset" color="#8b98a5" >重置</van-button>
                    <van-button round type="info" @click="commitInfo">提交</van-button>
                </div>
                
            </van-cell-group>

        <!--日期选择框--->
        <van-action-sheet v-model="isShowDatePanel" title="提醒时间">
           <van-datetime-picker
            type="date"
            :value="checkDate"
            bind:input="onInput"
            @confirm="confirmDate"
            :formatter="formatter"
            @cancel="cancelCheckDate"
            />
         </van-action-sheet>
    </div>
</template>
<script>
import {uploadPetImg,petRealse} from '../../../request/mobile/mine/request_mine'
export default {
    data(){
        return{
            petName:'',
            petId:'',
            petAge:'',
            petBirthday:null,
            petBirthdayFlag:false,
            petRedate:null,
            petRedateFlag:false,
            fileList:[],
            isShowDatePanel:false,
            checkDate:'',
        }
    },
    methods:{
        afterRead(event){
            this.fileList.push({
                status:'uploading',
                message:'上传中...'
            })
            var base64Content = event.content;
            var fileContent = event.file;
            //this.fileList.push({url:'https://img.yzcdn.cn/vant/sand.jpg',name:''})
            var formData = new FormData();
            formData.append("file",fileContent)
            var baseUrl='https://pett.oss-cn-beijing.aliyuncs.com/';
             uploadPetImg(formData).then(res=>{
                if(res.code==200){
                    console.log(res.data)
                    this.fileList=[]
                    this.fileList.push({
                        url:baseUrl+res.data,
                        status:'done'
                    })
                    return;
                }
                this.$Toast(res.msg)
            })
        },
        overSize(){
            this.$Toast({message:"文件过大",icon:'cross'})
        },
        deleteImg(event){
            console.log(123)
           this.fileList=[];
        },
        reset(){
            this.petName='';this.petAge='';this.petBirthday="";this.petRedate="";
        },
        commitInfo(){
                petRealse(
                    {
                        petName:this.petName,
                        petBirthday:this.petBirthday,
                       // AddTime:this.petRedate,
                        petImage:this.fileList[0].url,
                        petAge:this.petAge,
                        userId:1,
                        petId:this.petId
                    }
                ).then(res=>{
                        if(res.code==200){
                            this.$Notify({ type: 'success', message: '发布成功' });
                            this.$router.push({name:'myPet'})
                        }else{
                            console.log(res)
                            this.$Notify({type:'warning',message:res.msg})
                        }
                    })


            
        },
        initEdit(){
            var params = this.$route.params;
            this.petName= params.petName
            this.petBirthday=params.petBirthday
            this.petAge=params.petAge
            this.petRedate=params.petRedate
            this.petId=params.petId
            console.log(params)
            if(params.petImgUrl!=undefined){
                this.fileList.push({
                    url:params.petImgUrl,
                    status:'done'
                })
            }
        },
        goBack(){
            window.history.go(-1)
        },
        confirmDate(value){
            this.isShowDatePanel=false;
            var cuDate = new Date(value);
            value = cuDate.getFullYear()+'-'+(cuDate.getMonth()+1)+"-"+cuDate.getDate()
            if(this.petBirthdayFlag){
                this.petBirthday=value
                this.petBirthdayFlag=false
            }else if(this.petRedateFlag){
                this.petRedate=value
                this.petRedateFlag=false
            }
        },
        checkPetBirthday(){
            this.isShowDatePanel=!this.isShowDatePanel;
            this.petBirthdayFlag=true;
        },
        checkPetReDate(){
            this.isShowDatePanel=!this.isShowDatePanel;
            this.petRedateFlag=true
        },
        formatter(type,date){
            // if(type=='year'){
            //     return `${date}-`
            // }else if(type=='month'){
            //     return `${date}-`
            // }else if(type=='day'){
            //     return `${date}`
            // }
            return date;
        },
        cancelCheckDate(){
            this.petBirthdayFlag=false;
            this.petRedateFlag=false
            this.isShowDatePanel=false;
        }
    },
    created(){
        this.initEdit()
    }
}
</script>

<style scoped>
    .imgLabel{
        margin-left: .6rem;
        color: #494646;
        font-size: 14px;
    }
    .img{
        display: flex;
        margin-top: 2rem;
    }
    .imgSpan{
        margin-top: 2rem;
    }
    #addPet{
        margin: .3rem;
    }
    .button{
        right: 0px;
        margin-left: .3;
        background: white;
        width: 100%;
        align-items: center;
        text-align: center; 
        justify-content: space-between;
        margin-top: .6rem;
    }
</style>